<template>
  <div id="lineChart" />
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { scatter } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  scatter,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

const dataAll = [
  [10.0, 8.04],
  [8.0, 6.95],
  [13.0, 7.58],
  [9.0, 8.81],
  [11.0, 8.33],
  [14.0, 9.96],
  [6.0, 7.24],
  [4.0, 4.26],
  [12.0, 10.84],
  [7.0, 4.82],
  [5.0, 5.68]
]

const markLineOpt = {
  animation: false,
  label: {
    formatter: 'y = 0.5 * x + 3',
    align: 'right'
  },
  lineStyle: {
    type: 'solid'
  },
  tooltip: {
    formatter: 'y = 0.5 * x + 3'
  },
  data: [
    [
      {
        coord: [0, 3],
        symbol: 'none'
      },
      {
        coord: [20, 13],
        symbol: 'none'
      }
    ]
  ]
}

export default {
  data() {
    return {
      option: {
        title: {
          text: '带拟合线的散点图'
        },
        xAxis: { gridIndex: 0, min: 0, max: 20 },
        yAxis: { gridIndex: 0, min: 0, max: 15 },
        series: [
          {
            name: 'I',
            type: 'scatter',
            data: dataAll,
            markLine: markLineOpt
          }
        ]
      }
    }
  },
  mounted() {
    const myChart = echarts.init(document.getElementById('lineChart'))
    myChart.setOption(this.option)
    window.onresize = function() {
      myChart.resize()
    }
  }
}
</script>

<style scoped>

</style>
